<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生信息管理系统</title>

    <script src="https://cdn.staticfile.net/axios/0.18.0/axios.min.js"></script>
    <!--    &lt;!&ndash; import CSS &ndash;&gt;-->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

    <!--    <link rel="stylesheet" href="vue/element-ui/element-ui.css">-->
    <!--<script src="vue/axios.min.js"></script>-->
</head>
<style>
</style>
<body>
<h1>学生信息展示</h1>
<div id="app">
    <template>
        <div>
            <!-- 表格 -->
            <el-table
                    :data="tableData"
                    @selection-change="handleSelectionChange"
                    style="width: 100%">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        prop="id"
                        label="编号"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="date"
                        label="日期"
                        width="180">
                </el-table-column>
            </el-table>
            <!-- 批量删除按钮 -->
            <el-button  @click="batchDelete">批量删除</el-button>
        </div>
    </template>

</div>
</body>
<!--&lt;!&ndash; import Vue before Element &ndash;&gt;-->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!--&lt;!&ndash; import JavaScript &ndash;&gt;-->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<!--<script src="vue/vue.js"></script>-->
<!--<script src="element-ui/fonts/element-ui.js"></script>-->
<script src="vue/qs.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                tableData: [
                    {
                        id:1,
                        date: "2022-12-3"
                    },
                    {
                        id:2,
                        date: "2021-12-3"
                    },
                    {
                        id:3,
                        date: "2024-12-3"
                    },
                    {
                        id:4,
                        date: "2025-12-5"
                    }
                    // 数据列表
                ],
                multipleSelection: [] // 存储选中的行ID
            }
        },
        methods: {
            // 当选择项发生变化时
            handleSelectionChange(val) {
                this.multipleSelection = val.map(item => item.id);
            },
            // 单个删除
            handleDelete(id) {
                // 从列表中删除或标记为删除状态
            },
            // 批量删除
            batchDelete() {
                console.log("ids:" + this.multipleSelection);
                // 发送请求到后端进行批量删除
                // 这里只是示例，你需要根据实际接口来发送请求
                this.multipleSelection.forEach(id => {
                    this.handleDelete(id);
                });
                this.multipleSelection = []; // 清空选中项
                //可以添加提示信息
                this.$message.success('批量删除成功');

            }
        }
    })
</script>
</html>